<template>
  <div>
     <div class="b1">
         <h4 style="font-size:0.18rem">{{arr1.title}}</h4>
            <img src="det02.png" alt="" style="width:90%;he
            0.6rem">
         <p>2018年劇情/愛情/戰爭/章子怡/黃曉明/張震/王力宏/李芳芳/中国大陆</p>
         <p class="p2">用App查看影响资料</p>
     </div>
     <div class="b2">
         <img :src="arr1.images.small" alt="" style="width:1rem;height:
         2.5rem">
     </div>
     <div class="box33"><span>想看</span><span>看过</span></div>
     <p style="padding:0.1rem 0rem;color:#d0d0d0;font-size:0.14rem">{{arr1.title}}的简介</p>
     <p style="color:#9a9a9a;font-size:0.12rem">{{arr1.catalog|sheng}}</p>
     <p style="margin:0.2rem 0 0.1rem;font-size:0.14rem;color:#d9d9d9">查看更多的分类</p>
     <p class="p22"><span>剧情</span><span>爱情</span><span>战争</span></p>
     <p style="font-size:0.14rem;color:#e3e3e3; margin:0.3rem 0rem;">{{arr1.title}}的图片</p>
     <div style="width:100%;overflow-x:auto;">
         <div class="cont1">
               <img :src="arr1.images.small" alt="" v-for="(v,i) in 5" :key="i">
         </div>
     </div>
      <p style="font-size:0.14rem;color:#e3e3e3; margin:0.3rem 0rem;">{{arr1.title}}的短评</p>
  </div>
</template>

<script>
export default {
    props:["arr1"],
    filters:{
        sheng(val){
            if(val.length>80)
            return val.substr(0,80)+"..."
        }
    }
    
}
</script>

<style>
.b1{
    float:left;
    width:70%;
    font-size: 0.12rem;
}
.b2{
    float:right;
    width:30%;
}
.p2{
    font-size: 0.14rem;
    color:green;
    padding:0.1rem 0rem;
}
.box33{
    width:100%;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    margin:0.2rem 0rem;
}
.box33 span{
    width:45%;
  border-radius: 5%;
    text-align: center;
    line-height: 0.4rem;
    color:#ffe7b0;
    border:2px solid #ffe7b0;
}

.p22 span{
    background: #eee;
    width:0.5rem;
    line-height: 0.25rem;

    border-radius: 20%;
    margin:0.2rem 0.1rem;
    font-size: 0.14rem;
}
.cont1{
    width:400%;

}
.cont1 img{
    width:1.8rem;
    height: 1.2rem;
    margin-right: 0.1rem;
}


</style>